<template>
	<div class="login_wrapper">
		<div class="login-top">
			<!-- <div class="imgtop"><img src="static/img/loginPC/logo@2x.png" /></div> -->
		</div>
		<div class="login">
			<img class="bgimage" src="@/static/img/login/index@2x.png" />
			<div class="logins">
				<div class="login-center">
					<!-- <div class="imgcenter"><img src="static/img/loginPC/logo3.png" /></div> -->
				</div>
				<div class="login_bottom">
					<div class="logo">
						<div class="logoimage">
							 <img class="logoimage" src="@/static/home/logo.png" /> 
						</div>
						<div>
							<p class="loginspan"> 会员信息系统</p>
							<div class="eloginspan">
								MEMBER INFORMATION SYSTEM
							</div>
						</div>
					</div>
					<div class="loginlogin" v-show="sameuser">
						<div class="username">
							<div class="usernametop">
								<img src="@/static/img/login/yonghu@2x.png" />
								<input class="inputext" type="text" v-model="formLogin.loginName" placeholder="账号" />
								<img  style='width:9px;height:9px;margin:6px;cursor:pointer;z-index:999999' src="@/static/img/login/close.png" @click="resetLN()" />
							</div>
						</div>
						<div style="height: 20px"></div>
						<div class="username">
							<div class="usernametop">
								<img src="@/static/img/login/suosuoding@2x.png" />
								<input class="inputext width" :type="inputType" v-model="formLogin.password" placeholder="密码" @keydown.enter="login"/>
								<img src="@/static/img/login/closeEye.png" class="eye" @click="openEye" v-if="inputType=='password'"/>
								<img src="@/static/img/login/openEye.png" class="eye" @click="closeEye" v-if="inputType=='text'"/>
								<img  style='width:9px;height:9px;margin:6px 0 0 26px;cursor:pointer;z-index:999999' src="@/static/img/login/close.png" @click="resetPW()" />
							</div>
						</div> 

						<div class="btn">
							<button class="loginbtn" type="primary" @click="login">登 录</button>
							<span v-show="errorInfo.isShowError" class="error">{{ this.errorInfo.text }}</span>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- <div class="bei"><p>中国信达资产管理股份有限公司</p></div> -->
	</div>
</template>

<script>
	import apis from '@/api/login/apis.js'
	import AesUtil from "@/api/login/aesUtil.js";
	export default {
		name: "login",
		data() {
			return {
				formLogin: {
					//表单对象
					loginName: "",
					password: "",
				},
				errorInfo: {
					text: "",
					isShowError: false, //显示错误提示
				},
				sameuser: true,
				sameuserto: false,
				userLoginList: [],
				index: 0,
				inputType:'password'
			};
		},
		mounted() {
			// document.onkeydown = (event) => {
			// 	var e = event || window.event || arguments.callee.caller.arguments[0];
			// 	if (e && e.keyCode == 13) {
			// 		// enter 键
			// 		this.login();
			// 	}
			// };
		},
		methods: {
			openEye(){
				this.inputType='text';
			},
			closeEye(){
				this.inputType='password';
			},
			resetLN() {
				this.formLogin.loginName = "";
			},

			resetPW() {
				this.formLogin.password = "";

			},
			login() {
				//调用后端登录接口
				apis.shiroApi.loginIn(this.formLogin).then((data) => {
						if (data.data.error == "userName error" || data.data.error == "password error") {
							this.errorInfo.text = "用户名或密码错误";
						} else if (data.data.error == "time error") {
							this.errorInfo.text = "登录超时";
						} else if (data.data.error == "resource error") {
							this.errorInfo.text = "资源错误";
						}
						if (data && data.data) {
							// document.onkeydown = undefined;
							console.log(data.data);
							var json = data.data;
							if (json.status == "SUCCESS") {
								
								// this.$datamanager.setData("SYS_authority", data.authoritys)
								sessionStorage.setItem("token", json.token);
								//存入菜单,渲染菜单
								sessionStorage.setItem("sysMenuVoList",JSON.stringify(json.data.sysMenuVoList));
								sessionStorage.setItem("UserInfo",JSON.stringify(json.data.userInfo));
								sessionStorage.setItem("username", json.data.userInfo.userName);
								sessionStorage.setItem("userId", json.data.userInfo.orgCode);
								sessionStorage.setItem("orgUserNo", json.data.userInfo.orgUserNo);
								sessionStorage.setItem("orgName", json.data.userInfo.orgName);
								sessionStorage.setItem("orgTypeCode", json.data.userInfo.orgTypeCode);
								sessionStorage.setItem("roleList", json.data.sysRoleVoList);
								var role = json.data.sysRoleVoList;
								var roleArr = role.split(",");
								if (roleArr.length === 0) {
									this.errorInfo.isShowError = true;
									this.errorInfo.text = "未分配角色，请联系管理员";
									return;
								}
								this.$router.push({ path: '/' });
								return;
							} else if (json.message) {
								this.errorInfo.text = json.message;
							}
						}
						this.errorInfo.isShowError = true;
					})
					.catch((err) => {
						console.log("error:", err);
						this.errorInfo.isShowError = true;
						this.errorInfo.text = "系统接口异常";
					});
			}
		},
	};
</script>

<style scoped lang="scss">
	$input_width: 300px;
	.login_wrapper {
		width: 100%;
		height: 100vh;
		background-image: url(../static/img/login/bgColor.png);
		background-repeat: no-repeat;
		background-size: 100% 100%;

		.login-top {
			width: 350px;
			height: 45px;
			padding-top: 150px;
			margin: auto;

			.imgtop {
				width: 350px;
				height: 45px;

				img {
					width: 100%;
					height: 100%;
				}
			}
		}
	}

	.login_bottom {
		width: 30%;
		height: 300px;
		float: left;
		padding-top: 30px;
		margin-left: 180px;
		margin-top: -80px;
		background: #ffffff;
		border: 8px solid rgba(25, 25, 255, 0.27);
		box-shadow: 0px 7px 18px 0px rgba(56, 82, 177, 0.72);
		border-radius: 12px;

		.logo {
			margin-top: -20px;

			width: 100%;
			height: 40%;
			text-align: center;

			.logoimage {
				width: 75px;
				height: 60px;
				margin: 0 auto;
			}

			.loginspan {
				font-size: 16px;
				font-family: FZZZHONGJW;
				font-weight: bold;
				color: #061164;
			}

			.eloginspan {
				width: 100%;
				font-size: 8px;
				transform: scale(0.7);
				white-space: nowrap;
			}
		}

		.loginlogin {
			position: relative;
			top: 0;
			left: 0;
			right: 0;
			margin: auto;
			width: 250px;
			height: 220px;
		}

		.usersame {
			box-sizing: border-box;
			padding: 10px;
			font-size: 14px;
			color: #fff;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			align-items: center;
		}
	}

	.inputext {
		width: 190px;
		height: 20px;
		border: none;
		outline: none;

		color: #3e88cc;
		font-size: 14px;
		margin-top: 5px;
		// padding: 5px 15px;
		border-radius: 3px;
		z-index: 11;
	}

	::-webkit-input-placeholder {
		/* Chrome/Opera/Safari */
		color: #d8d8d8;
		opacity: 0.8;
		font-size: 12px;
	}

	// /deep/ .el-input,
	// .el-input__inner {
	//   height: 30px;
	//   border: 0 ;
	//   border-radius: 3px;
	// }

	/deep/ .el-input__inner {
		-webkit-appearance: none;
		background-color: #fff;
		background-image: none;
		border-radius: 4px;
		border: 0px solid #dcdfe6;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
		color: #606266;
		display: inline-block;
		font-size: inherit;
		height: 28px;
		line-height: 28px;
		outline: 0;
		padding: 0 15px;
		-webkit-transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
		transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
		width: 100%;
	}

	.selects {
		width: 200px;
		// height: 30px;
		margin-top: 5px;
		// border: 0 solid rgba(10,120,255,1);
		// border-radius: 3px;
		// background: #D5EBFF;
	}

	.btn {
		margin-top: 30px;
		text-align: center;

		.loginbtn {
			// width: 200px;
			// height: 30px;
			// border: none;
			// color: #fff;
			// background: url("/static/img/loginPC/btn2@2x.png") no-repeat left top;

			width: 200px;
			height: 30px;
			background: #455fe7;
			border: 2px solid rgba(255, 255, 255, 0.2);
			border-radius: 24px;
			outline: none;

			font-size: 10px;
			font-family: PingFang SC;
			font-weight: 400;
			color: #ffffff;
		}

		.error {
			display: block;
			text-align: center;
			color: red;
			width: 200px;
			font-size: 14px;
		}
	}

	.bgimage {
		width: 800px;
		height: 450px;
		position: fixed;
		margin-top: -100px;
		margin-left: -350px;
	}

	.login {
		width: 700px;
		height: 300px;
		padding-top: 90px;
		margin: auto;
	}

	.logins {
		width: 900px;
		height: 300px;
	}

	.username {
		display: flex;
		flex-direction: column;
		margin-top: 5px;
		border-bottom: 2px solid #EEEEEE;

		.usernametop {
			display: flex;
			flex-direction: row;
			color: #fff;
			font-size: 12px;
			position: relative;
			img {
				width: 20px;
				height: 20px;
				margin: 5px;
			}
			.width{
				width: 160px;
			}
			.eye{
				position: absolute;
				top: 0;
				right: 30px;
			}

		}
	}

	.login-center {
		width: 48%;
		float: left;
		padding-top: 20px;

		.imgcenter {
			width: 260px;
			height: 242px;
			margin: auto;
			vertical-align: middle;

			img {
				width: 100%;
				height: 100%;
			}
		}

	}

	.bei {
		width: 100%;
		height: 50px;
		text-align: center;
		line-height: 50px;
		font-weight: 600;
		color: #ffffff;
		font-size: 14px;
		margin-top: 3%;
	}

	.loginbtn:hover {
		background-color: #0000ff;
		color: white;
        cursor: pointer;
	}
</style>
